

<div id="Sexy-login" class="login">
  <h1>Iniciar sesión </h1>
  <form action="login.php" method="post" id="loginform">
    <label><em>Username : </em><input type="text" name="usuario"  placeholder="Username" autofocus="autofocus" required /></label>
    <label><em>Password : </em><input type="password" name="password" placeholder="Password"  required /></label>
    <input type="submit" class="submit" name="submit" id="submit" value="Login" onclick="return SexyLoginInit();" />
  </form>
</div>

<div id="Sexy-loading" class="login loading" style="display:none;">
Cargando...
</div> 

<div id="Sexy-error" class="login error" style="display:none;">
Nombre de usuario o contraseña incorrectos. <br /><a href="#" id="again">¿Deseas volver a intentarlo?</a>
</div>


<script type="text/javascript">
var Sexy_FirstTime = 0;

function SexyLoginInit()
{
  if (Sexy_FirstTime) {
    $('loginform').send();
    return false;
  } else {
    Sexy_FirstTime = 1;
  }
  
  $('again').addEvent('click', function(event) {

    event.stop();
    $('Sexy-error').setStyle('display', 'none');
    $('Sexy-loading').setStyle('display', 'none');
    $('Sexy-login').setStyle('display', 'block');

  });

  $('loginform').set('send', {

    onRequest: function() {
      $('Sexy-loading').setStyle('display', 'block');
      $('Sexy-login').setStyle('display', 'none');
    },
      
    onComplete: function(response) {
      $('Sexy-loading').setStyle('display', 'none');
      if (response == "OK!")
      {
        document.location.href = "login.php?exito=1";
      }
      else if (response == "NO!")
      {
        
        $('Sexy-error').setStyle('display', 'block');
      }
      else
      {
        $('Sexy-login').setStyle('display', 'block');
      }
  }});


  $('loginform').send();

  return false;

};

</script>